<template>
  <div class="w-full">
    <div class="hidden sm:grid 2xl:grid xl:grid lg:grid md:grid grid-cols-1 2xl:grid-cols-5 xl:grid-cols-5 lg:grid-cols-5 gap-3 mt-3">
      <div class="col-span-1 sm:col-span-1 2xl:col-span-2 xl:col-span-2 lg:col-span-2 p-3 box intro-y">
        <chinaMap @selProvince="changeProvince" @getMapData="getMapData"/>
      </div>
      <div class="col-span-1 sm:col-span-1 2xl:col-span-3 xl:col-span-3 lg:col-span-3 p-3 box intro-y">
        <div
            class="flex items-center border-b border-slate-200/60 dark:border-darkmode-400 pb-5 mb-5"
        >
          <div class="font-medium text-base truncate">选择省份</div>
        </div>
        <province @changeProvince="changeProvince"/>
      </div>
    </div>
    <div class="flex mt-3">
      <div class="shrink-0 basis-2/5 p-3 mr-3 box intro-y">
        <threeDMap :adcode="adcode" :mapData="mapData"/>
      </div>
      <div class="w-0 basis-3/5 p-3 box intro-y">
        <div class="absolute title">新能源当日出力趋势</div>
        <div class="flex justify-between">
          <div class="dark:text-slate-300 text-lg xl:text-xl font-medium">西安市</div>
          <el-button type="default" @click="showDialog = true">调整日出力</el-button>
        </div>
        <chart1/>
      </div>
    </div>
    <div class="box mt-5 border-t intro-y">
      <div class="report-chart">
        <wTable/>
      </div>
    </div>
    <edit :showDialog="showDialog" @close="showDialog = false"/>
  </div>
</template>

<script setup>
import {ref, computed} from "vue";
import threeDMap from "./threeDMap.vue";
import wTable from "./wTable.vue";
import province from "./province.vue";
import chinaMap from "./chinaMap.vue";
import chart1 from "./chart1.vue"
import edit from "./edit.vue"

const params = ref({
  today: new Date(),
  tomorrow: new Date(),
  afterTomorrow: new Date(),
  dayAfterTomorrow: new Date(),
});
const adcode = ref("");
const mapData = ref(null);
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以需要+1，并且保证两位数
  const day = String(date.getDate()).padStart(2, "0"); // 保证日期是两位数
  return `${year}-${month}-${day}`;
};
const dates = computed(() => ({
  today: formatDate(params.value.today),
  tomorrow: formatDate(params.value.tomorrow),
  afterTomorrow: formatDate(params.value.afterTomorrow),
  dayAfterTomorrow: formatDate(params.value.dayAfterTomorrow),
}));
params.value.tomorrow.setDate(params.value.today.getDate() + 1);
params.value.afterTomorrow.setDate(params.value.tomorrow.getDate() + 1);
params.value.dayAfterTomorrow.setDate(params.value.afterTomorrow.getDate() + 1);
const showDialog = ref(false);

const changeProvince = (province) => {
  adcode.value = province;
};
const getMapData = (e) => {
  mapData.value = e;
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 20px;
  color: #555555;
  font-weight: bold;
  left: calc(50% - 90px);
}
</style>